vue项目结合vant，实现上拉加载更多，下拉刷新

您所在的位置：网站首页 › vant list加载更多 › vue项目结合vant，实现上拉加载更多，下拉刷新

vue项目结合vant，实现上拉加载更多，下拉刷新

2024-01-09 19:02| 来源: 网络整理| 查看: 265

上拉加载思路：

引入vant 组件上拉list后端数据做了分页处理，获取接口数据，渲染到页面上,(此处只会显示一页的数据)设置属性去实现效果，loading,finished为vant组件中提供的每次滚动到底部后把页面数+1，发送一次请求获取新分页数据.获取完数据，将新获取的数据跟上一页获取的数据做一个合并判断加载完毕，数据的长度小于1，则finished设置为true,表示所有数据加载完毕** 代码：

￥ {{ item.price }}

上拉加载：初始设置loading 为true，数据加载成功，设置为false。所有数据加载完设置 finished为false(loading,finished为vant组件中提供的)判断数据加载完毕：数据的长度小于1 则判断数据加载完毕，

onLoad() { // 开始异步请求数据 this.loading = true; // 本次数据更新成功后，将loading设置为false getpro({ num: this.num, //num，一页获取多少个 index: this.index++, //index初始为0，页码 }).then((data) => { this.loading = false; this.prolist = [...this.prolist, ...data.data.msg]; // 上一页数据跟新加载的数据做合并 // 判断数据是否加载完毕 if (data.data.msg.length < 1) { // 将finished设置为true,表示所有数据加载完毕 this.finished = true; } }); },

下拉刷新思路

引入vant 组件下拉 PullRefresh设置相对应属性，(vant中有提示)相当于重新加载一遍数据请求成功后覆盖重新渲染的数据，isLoading设置为false表示加载完毕，将页码初始化，设置为05.bug:原先老数据未被清除，新数据直接覆盖，内容中key值相同，组件被复用了，** 解决：刷新这个路由 this.$router.go(0)

代码：

// 下拉刷新 onRefresh() { getpro({ num: this.num, index: this.index, }).then((data) => { this.prolist = data.data.msg; this.isLoading = false; this.index = 0; //页码也需要初始化 this.finished = false // }) },

作者：王雅楠

【本文地址】

vue项目结合vant，实现上拉加载更多，下拉刷新

vue项目结合vant，实现上拉加载更多，下拉刷新

今日新闻

推荐新闻